<script setup lang="ts">
import { computed, ref } from 'vue'
import chart from '@/components/common/chart.vue'
interface chartData {
  name: string[],
  value: number[]
}

const props = defineProps<{
  name: string,
  data: chartData[],
  height?: string,
  width?: string,
  color?: string[]
}>()

const width = props.width || '100%';
const height = props.height || '100%';
const color = props.color || ['rgba(255, 53, 53, 1)', 'rgba(254, 133, 0, 1)', 'rgba(255, 191, 1, 1)', 'rgba(34, 184, 254, 1)', 'rgba(32, 224, 186, 1)']

const options = computed(() => {
  let opt = {
    animation: false,
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: props.name,
        type: 'pie',
        radius: ['53%', '70%'],
        center: ['50%', '45%'],
        avoidLabelOverlap: false,
        padAngle: 0,
        itemStyle: {
          borderRadius: 1,
          borderColor: '#fff',
        },
        label: {
          show: true,
          position: 'center',
          formatter: '{name|{b}}\n{value|{d} %}',
          lineHeight: 16,
          rich: {
            name: {
              fontSize: 16,
              lineHeight: 34,
            },
            value: {
              fontSize: 22,
              fontWeight: 600,
              color: '#000000',
            }
          }
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: props.data
      }
    ],
    color,
  }
  return opt;
})


</script>

<template>
  <div :style="{ width: `${width}`, height: `${height}` }" class="chart-box">
    <chart class="chart" :options="options" />
  </div>
</template>

<style scoped lang="stylus">
.chart-box {
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>